import {
	Form,
	Row,
	Col,
	DatePicker,
	Input,
	Upload,
	Space,
	Button,
	message,
} from 'antd'
import {UploadOutlined} from '@ant-design/icons'
import {history, useModel} from 'umi'
import React, {useEffect, useState} from 'react'
import {formatDate} from '@/utils/common/dateFilter'
import cardStyles from '../index.less'
import {getReturnDetails, vehicleReturnInspection} from '@/service/order'
import {uploadFileUrl} from '@/service/common/upload'
import ReturnInfo from './returnInfo'
import DeductionExpenses from './deductionExpenses'
import DeductionExpensesInfo from './deductionExpensesInfo'

const formLayout = {
	labelCol: {
		xs: {span: 24},
		sm: {span: 4},
	},
	wrapperCol: {
		xs: {span: 24, offset: 0},
		sm: {span: 20, offset: 0},
	},
}
const styles = {
	width300: {width: '300px'},
	width600: {width: '600px'},
}
function ReturnCheckCar(props: any) {
	const {info, type, state} = props
	const [form] = Form.useForm()
	const {initialState} = useModel('@@initialState')
	const {fileName} = initialState || {}
	const [fileList, setFileList] = useState<any>([])
	// 获取路由中订单编号
	const [orderIds, setOrderIds] = useState('')
	const routerName = () => {
		setOrderIds(info?.id)
	}
	const [loading, setLoading] = useState(false)
	const [data, setDate] = useState<any>({
		applyTime: '',
		putDepotName: '',
		applyRemark: '',
		applyTypename: '',
		validateReturnCar: {},
		collectFeeList: [],
	})
	useEffect(() => {
		routerName()
		if (info?.id) {
			getReturnDetails(info?.id).then((res: any) => {
				if (res.success) {
					setDate(res?.data)
				}
			})
		}
	}, [info])
	//  文件上传生成上传信息
	const uploadProps = {
		action: uploadFileUrl,
		name: fileName, // 滴滴上传:file 测试上传:files
		data: {
			modelName: 'carOrder',
			targetAttr: 1,
		},
		onChange(info1: any) {
			if (info1.file.status === 'done') {
				setFileList(info1?.fileList)
				const list: any = []
				info1?.fileList?.forEach((res: any) => {
					list.push(res?.response?.data.id)
				})
				form.setFieldsValue({attachmentList: list})
			}
			setFileList(info1?.fileList)
		},
		onRemove(info1: any) {
			form.setFieldValue('attachmentList', '')
			message.success(`${info1?.name}移除成功`)
		},
		fileList,
	}
	// 取消
	const onCancel = () => {
		history.goBack()
	}
	// 提交
	const onFinish = (value: any) => {
		setLoading(true)
		const data1 = {...value}
		data1.validateTime = formatDate(value.validateTime, 'YYYY-MM-DD')
		data1.validateType = 2
		const info1 = {
			orderCarId: orderIds,
			validateReturnCar: {...data1},
		}
		vehicleReturnInspection(info1).then((res: any) => {
			if (res.success) {
				setLoading(false)
				history.goBack()
				message.success(res.msg)
			}
		})
	}
	return (
		<div className={cardStyles.page}>
			<div className={cardStyles.card} id="returnCar">
				<p className={cardStyles.title}>退车申请</p>
				<Form {...formLayout} wrapperCol={{flex: 1}}>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={24}>
							<Form.Item label="退车时间">
								{data?.applyTime}
							</Form.Item>
						</Col>
						<Col span={24}>
							<Form.Item label="退车类型">
								{data?.applyTypename}
							</Form.Item>
						</Col>
						<Col span={24}>
							<Form.Item label="退回仓库">
								{data?.putDepotName}
							</Form.Item>
						</Col>
						<Col span={24}>
							<Form.Item label="备注">
								{data?.applyRemark}
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>
			{type === 'look' && (
				<>
					{data?.validateReturnCar ? (
						<>
							{data?.validateStatus ? (
								<ReturnInfo info={data} />
							) : (
								<div className={cardStyles.card} id="returnCar">
									<p className={cardStyles.title}>退车验车</p>
									<Form
										form={form}
										{...formLayout}
										wrapperCol={{flex: 1}}
										autoComplete="off"
										onFinish={onFinish}>
										<Row
											gutter={24}
											className={cardStyles.rows}>
											<Col span={24}>
												<Form.Item
													name="validatePerson"
													label="验车人员"
													rules={[
														{
															required: true,
															message:
																'请填写验车人员',
														},
													]}>
													<Input
														placeholder="请填写验车人员"
														style={styles.width300}
													/>
												</Form.Item>
											</Col>
											<Col span={24}>
												<Form.Item
													name="validateTime"
													label="验车时间"
													rules={[
														{
															required: true,
															message:
																'请选择验车时间',
														},
													]}>
													<DatePicker
														allowClear
														placeholder="请选择验车时间"
														style={styles.width300}
													/>
												</Form.Item>
											</Col>
											<Col span={24}>
												<Form.Item
													name="remark"
													label="备注">
													<Input
														style={styles.width600}
														placeholder="请填写验车备注信息，不超过200个字符"
													/>
												</Form.Item>
											</Col>
											<Col span={24}>
												<Form.Item
													name="attachmentList"
													label="验车清单上传"
													rules={[
														{
															required: true,
															message:
																'请上传验车清单',
														},
													]}>
													<Upload {...uploadProps}>
														<Button
															icon={
																<UploadOutlined />
															}>
															添加清单
														</Button>
													</Upload>
													<p
														style={{
															margin: '15px 0 0 0',
														}}>
														附件说明：附件最大支持200M，
													</p>
													<p>
														支持格式：PDF、Word、Excel、JPG、PNG
													</p>
												</Form.Item>
											</Col>
										</Row>
										<Row
											justify="center"
											style={{marginTop: '20px'}}>
											<Form.Item>
												<Space>
													<Button
														shape="round"
														onClick={onCancel}>
														取消
													</Button>
													<Button
														shape="round"
														type="primary"
														htmlType="submit"
														loading={loading}>
														提交
													</Button>
												</Space>
											</Form.Item>
										</Row>
									</Form>
								</div>
							)}
						</>
					) : (
						<></>
					)}
				</>
			)}
			{type !== 'look' && (
				<>
					{data?.validateStatus ? (
						<ReturnInfo info={data} />
					) : (
						<div className={cardStyles.card} id="returnCar">
							<p className={cardStyles.title}>退车验车</p>
							<Form
								form={form}
								{...formLayout}
								wrapperCol={{flex: 1}}
								autoComplete="off"
								onFinish={onFinish}>
								<Row gutter={24} className={cardStyles.rows}>
									<Col span={24}>
										<Form.Item
											name="validatePerson"
											label="验车人员"
											rules={[
												{
													required: true,
													message: '请填写验车人员',
												},
											]}>
											<Input
												placeholder="请填写验车人员"
												style={styles.width300}
											/>
										</Form.Item>
									</Col>
									<Col span={24}>
										<Form.Item
											name="validateTime"
											label="验车时间"
											rules={[
												{
													required: true,
													message: '请选择验车时间',
												},
											]}>
											<DatePicker
												allowClear
												placeholder="请选择验车时间"
												style={styles.width300}
											/>
										</Form.Item>
									</Col>
									<Col span={24}>
										<Form.Item name="remark" label="备注">
											<Input
												style={styles.width600}
												placeholder="请填写验车备注信息，不超过200个字符"
											/>
										</Form.Item>
									</Col>
									<Col span={24}>
										<Form.Item
											name="attachmentList"
											label="验车清单上传"
											rules={[
												{
													required: true,
													message: '请上传验车清单',
												},
											]}>
											<Upload {...uploadProps}>
												<Button
													icon={<UploadOutlined />}>
													添加清单
												</Button>
											</Upload>
											<p style={{margin: '15px 0 0 0'}}>
												附件说明：附件最大支持200M，
											</p>
											<p>
												支持格式：PDF、Word、Excel、JPG、PNG
											</p>
										</Form.Item>
									</Col>
								</Row>
								<Row
									justify="center"
									style={{marginTop: '20px'}}>
									<Form.Item>
										<Space>
											<Button
												shape="round"
												onClick={onCancel}>
												取消
											</Button>
											<Button
												shape="round"
												type="primary"
												htmlType="submit"
												loading={loading}>
												提交
											</Button>
										</Space>
									</Form.Item>
								</Row>
							</Form>
						</div>
					)}
				</>
			)}

			{state === 'pay' && (
				<>
					{type &&
					(data?.settlementStatus === 1 ||
						data?.settlementStatus === 3 ||
						data?.settlementStatus === 9 ||
						data?.settlementStatus === 10) ? (
						<DeductionExpensesInfo info={info} />
					) : (
						<></>
					)}
					{!type ? (
						<>
							{data?.settlementStatus === 1 ||
							data?.settlementStatus === 3 ||
							data?.settlementStatus === 9 ||
							data?.settlementStatus === 10 ? (
								<DeductionExpensesInfo info={info} />
							) : (
								<DeductionExpenses
									info={info?.id}
									orderId={info?.orderNo}
									time={data?.applyTime}
									title="退车结算信息"
									btnTitle="批量导入退车费用项"
								/>
							)}
						</>
					) : (
						<></>
					)}
				</>
			)}
		</div>
	)
}
export default ReturnCheckCar
